<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/login/login.css" rel="stylesheet" type="text/css" >
<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
	
</script>
<title>登录</title>
<style type="text/css">
	#yz {
		top:20px;
		margin-left:10px;
		height:50px;
		line-height:50px;
		position:relative;
	}
	.yzm_icon {
		width:100px;
		height:20px;
		line-height:20px;
		margin:10px 0px;
		padding:10px 0px 10px 25px;
	}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	var count = 0;
	function getYZM1(){
		$("#yz").attr("src","/fuhe/yzmservlet?a="+count);
		count++;
	}
	
	//登录验证
	function login(){
		var msg = $("#error");
		//验证用户名不能为空
		if ($("input[name=username]").val()==null ||
				$("input[name=username]").val()=="") {
			//修改错误提示信息
			msg.text("请输入用户名！");
			//输入框重新获取焦点
			$("input[name=username]").focus();
		}
		//验证密码不能为空
		if($("input[name=password]").val()==null ||
				$("input[name=password]").val()==""){
			msg.text("请输入密码！");
			$("input[name=password]").focus();
			return;
		}
		//验证码不能为空判断
		if ($("input[name=yzm]").val()==null ||
				$("input[name=yzm]").val()=="") {
			msg.text("请输入验证码！").focus();
			return;
		}
		$(".login_form").submit();
	}
	
	$(document).keyup(function(event){
		if(event.keyCode == 13){
			login();
		}
	})
	
</script>
</head>
<body>
	<jsp:include page="../public/header.jsp">
		<jsp:param value="0" name="index"/>
	</jsp:include>
	<div class="background_img"></div>
		<div class="login">
			<div class="login_title">
				<div class="login_action left">
					登录
				</div>
			</div>
			<form class="login_form" action="/fuhe/login" method="post">
				<ul class="login_now">
					<li><input type="text" class="name_icon" name="username" value="" placeholder="请输入手机号" /></li>
					<li><input type="password" class="pwd_icon" name="password" placeholder="请输入登录密码" /></li>
						<input style="display:none" name="afterLoginUrl" value="beforeLoginUrl"/>
					<li>
						<!-- 验证码框 -->
						<input class="yzm_icon" type="text" placeholder="请输入验证码" name="yzm">
						<img id="yz" onclick="getYZM1()" src="/fuhe/yzmservlet" >
						<!-- 隐藏验证码框 -->
						<input name="yzm1" type="hidden" value="${realyzm}">
					</li>
					<li class="pass_regist">
						<a href="javascript:void(0)">忘记登录密码</a>
						<a href="register.html" class="right">免费注册&nbsp;>></a>
					</li>
					<li>
						<input type="button" class="login_btn" value="登&nbsp;&nbsp;&nbsp;&nbsp;录" onclick="login()">
					</li>
					<c:if test="${!empty error }">
						<div>
							${error }
						</div>
					</c:if>
				</ul>
			</form>
		</div>

</body>
</html>